<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医疗保险支出统计表</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>


    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


    <style>
        #lineTd {
            padding: 0;
            position: relative;
        }
        #lineTd span:first-child {
            position: absolute;
            top: 20px;
            right: 20px;
        }
        #lineTd span:last-child {
            position: absolute;
            bottom: 20px;
            left: 20px;
        }
    </style>

</head>
<body>

    <div id="app">
        <!-- 每页数据数量一定，最后一页需要显示合计 -->
        <div id="printListAll">
            <div style="page-break-after: always">
                <table
                        border="1"
                        cellpadding="15"
                        style="border-collapse: collapse; width: 100%; font-size: 14px"
                >
                    <caption>
                        <!--<p style="font-size: 28px">2022年3月医疗保险支出统计表</p>-->
                        <p style="font-size: 28px">{{title}}</p>
                    </caption>
                    <tr>
                        <th id="lineTd" colspan="2" rowspan="2" style="overflow:hidden;">
                            <span>医疗类别</span>
                            <img src="/admin/html/module/yumenyoutian/img/table-bg2.png" alt="" style="width:99%">
                            <span>人员类别</span>
                        </th>
                        <th align="center" colspan="2">门诊</th>
                        <th align="center" colspan="2">特慢病</th>
                        <th align="center" colspan="2">住院</th>
                        <th align="center" colspan="2">金额合计</th>
                    </tr>
                    <tr>
                        <th align="center">人次</th>
                        <th align="center">金额</th>
                        <th align="center">人次</th>
                        <th align="center">金额</th>
                        <th align="center">人次</th>
                        <th align="center">金额</th>
                        <th align="center">人次</th>
                        <th align="center">金额</th>
                    </tr>
                    <tr v-for="(item,index) in tableData">
                        <td align="center" rowspan="3" style="width:80px;" v-if="index==0">职工</td>

                        <td align="center" rowspan="3" v-if="index==3">再就业</td>

                        <td align="center" colspan="2" v-if="index==6">供养</td>
                        <td align="center" colspan="2" v-if="index==7">合计</td>
                        <td style="width:100px;" v-if="index<6">{{item.name}}</td>
                        <td align="center">{{item.t1}}</td>
                        <td align="center">{{item.t2}}</td>
                        <td align="center">{{item.t3}}</td>
                        <td align="center">{{item.t4}}</td>
                        <td align="center">{{item.t5}}</td>
                        <td align="center">{{item.t6}}</td>
                        <td align="center">{{item.t7}}</td>
                        <td align="center">{{item.t8}}</td>
                    </tr>

                </table>
                <div
                        style="
              display: flex;
              justify-content: space-around;
              margin-top: 30px;
              font-size: 10px;
            "
                >
                    <div>部门负责人：</div>
                    <div>审核：</div>
                    <div>制表：</div>
                    <div>填报日期：</div>
                </div>
            </div>
        </div>
    </div>

    <script>


        var vm = new Vue({
           el:"#app",
           data:{
               // 表格数据
               tableData: [],
               title:""
           },
           created(){

           },
            methods:{
                printHtml(){
                    $("#printListAll").print();
                },
                // 获取表格数据
                setData(data) {
                    this.tableData = data.list;
                    this.title = data.title;
                },
            }
        });

        function setData(data){
            console.log(data);
            vm.setData(data);
        }
    </script>
</body>
</html>